<template>
  <view class="view-check-list">
    <view class="view-check">
      <Detail :detaiData="detaiData"></Detail>
      <view class="hidden-title">{{ detaiData.status === '4' ? '停电' : '送电' }}确认</view>
      <view class="form-container">
        <view class="background-white">
          <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="70vw" labelPosition="top">
            <view style="padding-left: 30rpx; margin-bottom: 30rpx">
              <uni-data-checkbox
                v-model="formData.itemIds"
                multiple
                :localdata="detaiData.status === '4' ? stopList : startList"
                :map="{ value: 'id', text: 'description' }"
              ></uni-data-checkbox>
            </view>

            <uni-forms-item
              style="padding-left: 30rpx; margin-top: 30rpx"
              name="remark"
              :label="`${detaiData.status === '4' ? '停电' : '送电'}备注`"
            >
              <textarea
                v-model="formData.remark"
                class="text-area"
                placeholder="请输入备注"
                placeholder-class="form-placeholder__style"
                maxlength="20"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
      </view>
    </view>
    <view class="submit-group">
      <button class="u-button block" :ripple="true" @click="submit">提交</button>
    </view>
    <Signature ref="signature" v-model="formData.signatureUrls" auto-upload @success="onSignatureSuccess" />
  </view>
</template>
<script>
import Detail from './components/detail.vue'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCellSelect from '@/components/cu-cell/cu-cell-select.vue'
import Signature from '@/pages/jobSlip/components/ContinueSign.vue'
import { getElectricDetail, stopConfirm, startConfirm } from '@/api/spw/powerCut.js'

export default {
  components: {
    Detail,
    CuCellGroup,
    CuCellSelect,
    Signature
  },
  data() {
    return {
      subWorkId: '',
      detaiData: {},
      stopList: [
        { id: 1, description: '检查指示灯、电流表等确认无负荷' },
        { id: 2, description: '停电并验电、确认无电' },
        { id: 3, description: '配电室挂 “禁止合闸，有人工作”牌' },
        { id: 4, description: '现场确认设备不能启动' }
      ],
      startList: [
        { id: 1, description: '检查接地线应拆除、接地刀应分闸' },
        { id: 2, description: '安全附件应恢复' },
        { id: 3, description: '设备盘车灵活' },
        { id: 4, description: '电气绝缘符合要求' },
        { id: 5, description: '摘牌安装规程送电' },
        { id: 6, description: '现场试车' },
        { id: 7, description: '如果首次送电核对电缆的一一对应' }
      ],
      formData: {
        processResult: '',
        remark: '',
        itemIds: [],
        signatureUrls: ''
      },
      rules: {
        remark: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad(option) {
    this.ticketId = option.ticketId
    this.formData.ticketId = this.ticketId
    getElectricDetail(this.ticketId).then(({ data }) => {
      this.detaiData = data
      uni.setNavigationBarTitle({
        title: this.detaiData.status === '4' ? '停电确认' : '送电确认'
      })
    })
  },
  methods: {
    submit() {
      this.$refs.form.validate().then((res) => {
        if (res) {
          let len = this.detaiData.status === '4' ? 4 : 7
          if (this.formData.itemIds.length !== len) {
            this.$modal.showToast('确认项需全部确认完成')
            return
          }
          this.$refs.signature.open()
        }
      })
    },
    /**
     * @description  签名成功
     */ onSignatureSuccess() {
      this._save()
    },
    async _save() {
      let fn = stopConfirm
      if (this.detaiData.status == '8') {
        fn = startConfirm
      }

      fn.call(null, this.formData).then((response) => {
        this.$modal.showToast('确认成功')
        uni.navigateBack()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.view-check-list {
  .view-check {
    margin-bottom: 120px;
  }

  .hidden-title {
    background: #f5f5f5;
    padding: 20rpx 30rpx;
    color: #999;
  }

  .background-white {
    background-color: #fff;
  }
}
</style>
